<script setup>
import TransferV2 from "@/components/TransferV2.vue";
import { getExistUserGroupApi } from "@/api/activity";

const route = useRoute();

const props = defineProps({
  limit: {
    type: Array,
    required: true,
  },
});

const whiteGroupVisible = ref(false),
  whitelist = ref([]);

const whiteRef = ref();

const activityId = computed(() => {
  return route.params.copyId || route.params.id || "";
});

const getUserGroupList = async (type) => {
  const rs = await getExistUserGroupApi({
    actId:activityId.value,
    userGroupIds: props.limit.value,
    type: 2,
  });
  if (rs.code == 200) {
    whitelist.value = rs.payload.filter(
      (item) => props.limit.value.indexOf(item.id) >= 0
    );
  }
};

const getWhiteKeys = () => {
  let keys = whiteRef.value.getKeys();
  whitelist.value = keys;
  props.limit.value = keys.map((item) => item.id);
  formatLimit()
  whiteGroupVisible.value = false;
};

const onRemoveWhite = (index) => {
  ElMessageBox.confirm(`确认移除该白名单吗？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    whitelist.value.splice(index, 1);
    props.limit.value = whitelist.value.map((item) => item.id);
    formatLimit()
  });
};

const formatLimit = () => {
  props.limit.propertyKey = "userGroup";
  props.limit.propertyType = 0;
  props.limit.businessType = "userGroup";
  let expressionArry = props.limit.value.map(
    (item) => `$_group.userGroup_${item}==true`
  );
  props.limit.expression = expressionArry.join("||");
};

onMounted(() => {
  if (activityId.value !== "") {
    getUserGroupList();
  }
});
</script>
<template>
  <div class="limits-item">
    <div class="limits-item_header">
      <div class="limits-item_title">白名单限制</div>
      <el-button type="text" plain @click="whiteGroupVisible = true" icon="Plus"
        >添加</el-button
      >
    </div>
    <div
      class="rule-item_container inline"
      v-for="(item, index) in whitelist"
      :key="index"
    >
      <div class="rule-item">
        <span>{{ item.name }}</span>
        <div class="rule-item_close">
          <el-button type="text" @click.stop="onRemoveWhite(index)"
            ><el-icon> <close /> </el-icon
          ></el-button>
        </div>
      </div>
    </div>
  </div>
  <Dialog
    v-model="whiteGroupVisible"
    title="添加白名单"
    @confirm="getWhiteKeys"
  >
    <transfer-v2
      ref="whiteRef"
      :seletced="whitelist"
      :titles="['白名单列表', '已选择列表']"
      :props="{ key: 'id', label: 'name', disabled: 'disabled' }"
      :hidden-disabled="true"
      loadUrl="activity/ext/getUserGroupPager"
    ></transfer-v2>
  </Dialog>
</template>
<style lang="scss" scoped>
.limits-item {
  background-color: #fafcff;
  padding: 10px;
  & + .limits-item {
    margin-top: 10px;
  }
  &_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &_title {
    position: relative;
    padding-left: 12px;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 16px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #3e61a9;
      border-radius: 2px;
    }
  }
  .rule-item_container {
    display: flex;
    &.inline {
      display: inline-flex;
      margin-right: 10px;
    }
    .rule-item {
      background-color: #ffffff;
      border: 1px solid #a5bde2;
      border-radius: 4px;
      font-size: 14px;
      padding: 0 25px 0 10px;
      position: relative;
      user-select: none;
      line-height: 32px;
      cursor: pointer;
      &_close {
        position: absolute;
        right: 5px;
        height: 100%;
        top: 0;
      }
    }

    & + .rule-item_container {
      margin-top: 10px;
    }
  }
}
</style>
